{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>{% translate "Employee onboarding" %}</title>
    <!-- CSS files -->
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/extra.css' %}">
    <link rel="stylesheet" href="{% static 'css/selectize-bootstrap.min.css' %}">
    <style>
      .btn-primary, .btn-outline-primary, .btn-ghost-primary, .btn-primary:hover, .btn-outline-primary:hover, .btn-ghost-primary:hover, .border-primary {
        --tblr-primary: rgb({{ org.base_color_rgb }});
        --tblr-btn-hover-bg: rgb({{ org.base_color_rgb }});
        --tblr-primary-rgb: {{ org.base_color_rgb }};
        --tblr-primary-darker: rgb({{ org.base_color_rgb }});
      }
      a, a:hover, a:focus {
        color: rgb({{ org.base_color_rgb }})
      }
      .form-control:focus {
        color: inherit;
        background-color: #ffffff;
        border-color: rgb({{ org.base_color_rgb }});
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba({{ org.base_color_rgb }}, 0.25); }
    </style>
    {% block extra_head %}{% endblock %}
  </head>
  <body class="antialiased border-top-wide border-primary d-flex flex-column">
    <div class="page page-center">
      <div class="container-tight py-4">
        <div class="text-center mb-4">
          <a href="."><img src="{{ org.get_logo_url }}" alt=""></a>
        </div>
        {% block content %}{% endblock %}
      </div>
    </div>
    <script src="{% static 'js/tabler.js' %}"></script>
    {% block extra_js %}
    {% endblock %}
  </body>
</html>
